<template>
  <el-tabs v-model="activeLabel" type="card" @tab-remove="removeTab">
    <el-tab-pane 
      v-for="(item, index) in labelList" 
      :key="item.path" 
      :label="item.title" 
      :name="item.path"
      :closable="item.path !== '/home'"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState({
      labelList: state => state.system.labelList,
      currentPath: state => state.system.currentPath
    }),
    activeLabel: {
      get() {
        return this.currentPath
      },
      set (path) {
        this.$store.commit('system/SET_CURRENT_PATH', path)
        this.$router.push({ path })
      }
    }
  },
  methods: {
    removeTab(path) {
      let info = this.labelList.find(item => item.path === path)
      this.$store.commit('system/REMOVE_LABEL', info)
    }
  }
};
</script>

<style scoped lang="scss">
.el-tabs {
  /deep/.el-tabs__header {
    background-color: #fff;
    margin: 0;
    padding-top: 5px;
    .el-tabs__item {
      line-height: 26px;
      height: 26px;
      &.is-active {
        background-color: #f0f2f5;
        border-bottom: none;
      }
    }
    .el-tabs__nav-next, .el-tabs__nav-prev {
      line-height: 26px;
    }
  }
}
</style>
